<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/icons-extra.css" />
		<script src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="layui/layui.js" ></script>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
		<style>
			/*设置轮播图高度*/
			#slider img{
		        height: 240px;
		    }
		    /*.mui-bar{
		    	background: white;
		    }*/
		    .mui-grid-view.mui-grid-9{
		    	background: rgba(0,0,0,0);
		    	
		    }
		    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
		    	border: none;
		    }
		    /*设置主题属性*/
		    .mui-content{
		    	background-color: white;
		    }
		    .nine-box li{
		    	width: 50%;
		    }
		    body{
		    	background: white;
		    }
		    .mui-bar-nav{
		    	background: #53C8F4;
		    	
		    }
		    .mui-bar-nav h1{
		    	color: white;
		    }
		    marquee{
		    	color: #53C8F4;
		    	margin-top: 20px;
		    	margin-bottom: -10px;
		    }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">当下公寓</h1>
		</header>
		<div class="mui-content">
		    <!--轮播图-->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" style="height: 185px;">
				    <!--支持循环，需要重复图片节点-->
				    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/2.jpg" /></a></div>
				    <div class="mui-slider-item"><a href="#"><img src="images/0.jpg" /></a></div>
				    <div class="mui-slider-item"><a href="#"><img src="images/1.jpg" /></a></div>
				    <div class="mui-slider-item"><a href="#"><img src="images/2.jpg" /></a></div>
				    <!--支持循环，需要重复图片节点-->
				    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/0.jpg" /></a></div>
			  	</div>
			  	<!--轮播图底部的小圆圈-->
			    <div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					
			    </div>
			</div>
			<!--功能列表-->
			<ul class="mui-table-view nine-box mui-grid-view mui-grid-9 public-fff-bg" >
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"  id="sqapply">
					<a href="javascript:;">
						<!--<span class="mui-icon mui-icon-phone"></span>-->
						<span>
							<img src="images/baoxiu.png" width="40px"/>
						</span>
						<div class="mui-media-body">申请报修</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="rzapply">
					<a href="javascript:;">
						<!--<span class="mui-icon mui-icon-compose"></span>-->
						<span>
							<img src="images/ruzhu.png" width="40px"/>
						</span>
						<div class="mui-media-body">申请入住</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="tsapply">
					<a href="javascript:;">
						<!--<span class="mui-icon mui-icon-paperplane"></span>-->
						<span>
							<img src="images/tuisu.png" width="40px"/>
						</span>
						<div class="mui-media-body">申请退宿</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="zjapply">
					<a href="javascript:;">
						<!--<span class="mui-icon mui-icon-redo" style="color: deepskyblue;"></span>-->
						<span>
							<img src="images/zujin.png" width="40px"/>
						</span>
						<div class="mui-media-body">缴纳租金</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="queryapply">
					<a href="javascript:;">
						<!--<span class="mui-icon mui-icon-search"></span>-->
						<span>
							<img src="images/sousuo.png" width="40px"/>
						</span>
						<div class="mui-media-body">空房查询</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" id="yjapply">
					<a href="#">
						<!--<span class="mui-icon mui-icon-checkmarkempty"></span>-->
						<span>
							<img src="images/yajin.png" width="40px"/>
						</span>
						<div class="mui-media-body">缴纳押金</div>
					</a>
				</li>
				
	        </ul>
	        <div style="position: absolute; top: 5%;z-index:20;right: 3px;width: 100%;">
	        	<marquee>温馨提示：天气转凉，大家注意保暖</marquee>
	        </div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			var userInfo = JSON.parse(localStorage.getItem("userInfo"));
			
			
			mui.init();
			
			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
			});
			layui.use(['layer'],function() {
				var layer = layui.layer;
				$("#sqapply").click(function() {
					if(userInfo!=null) {
						openNewPage("repairapply.html","baoxiuapply");
					}else{
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
				});
				$("#rzapply").click(function() {
					if(userInfo!=null) {
						openNewPage("live_apply1.html","rzapply");
					}else {
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
					
				});
				$("#tsapply").click(function() {
					if(userInfo!=null) {
						openNewPage("retire_apply.html","rtapply");
					}else {
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
					
				});
				$("#yjapply").click(function() {
					if(userInfo!=null) {
						openNewPage("deposit_apply.html","yjapply");
					}else {
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
				});	
				$("#zjapply").click(function() {
					if(userInfo!=null) {
						openNewPage("rent_apply.html","zjapply");
					}else {
						layer.msg("<span style='color:red'>请先去登录</span>");
					}
				});	
				$("#queryapply").click(function() {
					openNewPage("emptyroom.html","queryapply");
				});
			});
			
			function openNewPage(url1,idname) {
				mui.openWindow({
				    url:url1,
				    id:idname,
				    styles:{
				      top:0,//新页面顶部位置
				      bottom:0//新页面底部位置
				    },
				    extras:{
				      id:1		//自定义扩展参数，可以用来处理页面间传值
				    },
				    createNew:false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
				    show:{
				      autoShow:true,//页面loaded事件发生后自动显示，默认为true
				      aniShow:"slide-in-right",//页面显示动画，默认为”slide-in-right“；
				      duration:200///页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
				    },
				    waiting:{
				      autoShow:false,//自动显示等待框，默认为true
				      //title:'正在加载...',//等待对话框上显示的提示内容
				      options:{
				       /* width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度
				        height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度
				        ......*/
				      }
				    }
				});
			}
		</script>
	</body>

</html>